<template>
  <div class="show-content">
    <!-- logo and banner-->
    <div class="banner">
      <img :src="logo" class="logo">
      <div class="banner-item">产品服务</div>
      <div class="banner-item">解决方案</div>
      <div class="banner-item">关于我们</div>
      <div class="banner-item">电话：070-50292918</div>
    </div>

    <!-- banner -->
    <video autoplay="autoplay" muted="muted" :src="videoSrc" class="imgBG"></video>
    <div class="fixed-text">以减排为先<br>为未来而努力</div>

    <!-- 特点 -->
    <div class="why">为什么选择轻碳</div>
    <div class="innovation-content">
      <div class="innovation-item">
        碳全景大屏
        <img :src="show1" class="show-item">
        <!-- <img :src="svgBase" class="svg-base"> -->
        <div class="innovation-dis">全方位、多角度、全景展现各项数据，实时监控。</div>
      </div>
      <div class="innovation-item">
        碳排放仿真
        <!-- <img :src="svgBase" class="svg-base"> -->
        <img :src="show2" class="show-item">
        <div class="innovation-dis">动态模拟演算碳排放结果，结果随用户修改实时改变。</div>
      </div>
      <div class="innovation-item">
        可视化建模
        <!-- <img :src="svgBase" class="svg-base"> -->
        <img :src="show3" class="show-item">
        <div class="innovation-dis">以流程图的形式对核算模型搭建过程进行展示，流程结束即搭建过程结束。</div>
      </div>
      <div class="innovation-item">
        智能表单助手
        <!-- <img :src="svgBase" class="svg-base"> -->
        <img :src="show4" class="show-item">
        <div class="innovation-dis">将表单模块化，引导用户填写。字段含义搜索，加快填写效率。</div>
      </div>
      <div class="innovation-item">
        智能减排顾问
        <!-- <img :src="svgBase" class="svg-base"> -->
        <img :src="show5" class="show-item">
        <div class="innovation-dis">运用人工智能chatGPT，反馈减排方案，实现个性化减排定制。</div>
      </div>
    </div>

    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: require("@/assets/show.mp4"),
      logo: require("@/assets/logo.jpg"),
      svgBase: require("@/assets/iconWhy.svg"),
      show1: require("@/assets/show1.png"),
      show2: require("@/assets/show2.png"),
      show3: require("@/assets/show3.png"),
      show4: require("@/assets/show4.png"),
      show5: require("@/assets/show5.png"),

    }
  }
}
</script>

<style scoped>
.show-item {
  width: 100px;
}

.show-item:hover {
  width: 110px;

}

.innovation-dis {
  font-size: 14px;
  line-height: 20px;
}

.svg-base {
  width: 100px;
}

.show-content {
  height: 2000px;
}

.banner {
  display: flex;
  height: 70px;
}

.logo {
  width: 200px;
  margin-left: 100px;
}

.banner-item {
  margin-left: 50px;
  height: 70px;
  width: 200px;
  line-height: 70px;
  font-size: 14px;
  font-weight: bolder;
}

.imgBG {
  height: 700px;
  width: 100%;
  background-color: #040609;
}

.fixed-text {
  position: absolute;
  top: 130px;
  font-size: 40px;
  left: 100px;
  color: #fff;
  font-weight: bolder;
}

.innovation-content {
  display: flex;
  width: 100%;
  margin: 0 auto;
  margin-top: 90px;
  text-align: center;
}

.innovation-item {
  margin-left: 70px;
  height: 70px;
  width: 200px;
  line-height: 70px;
  font-size: 20px;

}

.why {
  position: absolute;
  top: 800px;
  font-size: 30px;
  font-weight: bolder;
  left: 100px;
}
</style>
